<template>
  <div>
    <!-- 头部 --start-->
    <div class="nav">
      <p v-if="e=='1'">
        <span>.</span>
        申请发货
      </p>
      <p v-if="e=='2'">
        <span>.</span>
        订单详情
      </p>

      <div id="nav_go5">
        <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="revert()">返回</el-button>
      </div>
    </div>
    <!-- 头部 --end-->

    <!-- 合同信息 --start-->
    <div class="conter_box1">
      <p>
        <em>1</em> 合同信息
      </p>
      <ul>
        <li>
          <span>订单编号</span>
          <el-input v-model="saleordno" style="width:70%" readonly></el-input>
        </li>
        <li>
          <span>订单类型</span>
          <el-input v-model="ordertype" style="width:70%" readonly></el-input>
        </li>
        <li>
          <span>企业名称</span>
          <el-input v-model="compony" style="width:70%" readonly></el-input>
        </li>
        <li>
          <span>接单日期</span>
          <el-input v-model="getdate" style="width:70%" readonly></el-input>
        </li>
        <li>
          <span>交货日期</span>
          <el-input v-model="deliverydate" style="width:70%" readonly></el-input>
        </li>
        <li>
          <span>签单人员</span>
          <el-input v-model="writer" style="width:70%" readonly></el-input>
        </li>
      </ul>
    </div>
    <!-- 合同信息 --end-->

    <!-- 产品信息 --start-->
    <div class="conter_box3">
      <p>
        <em>2</em> 产品信息
      </p>
      <template>
        <el-table :data="tableData" style="width: 100%" max-height="200px">
          <el-table-column type="index" label="序号" align="center"></el-table-column>
          <el-table-column label="车型代码" align="center" width="170">
            <template slot-scope="scope">
              <el-input v-model="scope.row.carcode" readonly></el-input>
            </template>
          </el-table-column>
          <el-table-column label="单位" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.unit" readonly></el-input>
            </template>
          </el-table-column>
          <el-table-column label="数量" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.number" readonly></el-input>
            </template>
          </el-table-column>
          <el-table-column label="车号" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.carno" readonly></el-input>
            </template>
          </el-table-column>
          <el-table-column label="交期" align="center" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.deliverydate" readonly></el-input>
            </template>
          </el-table-column>
          <el-table-column label="工艺要求" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.gongyiask" readonly></el-input>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark" readonly></el-input>
            </template>
          </el-table-column>
          <el-table-column label="零部件" align="center" width="80">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-search"
                circle
                size="mini"
                @click="pz(scope.row.Id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <el-dialog
      title="零部件"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :modal-append-to-body="false"
    >
      <div class="color_box"></div>
      <div>
        <template>
          <el-table :data="tableData1" style="width: 100%" height="300px">
            <el-table-column label="零部件代码" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.classify" readonly></el-input>
              </template>
            </el-table-column>
            <el-table-column label="零部件名称" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name" readonly></el-input>
              </template>
            </el-table-column>>
          </el-table>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="dialogVisible = false">确定</el-button>
        <el-button type="info" size="medium" @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
    <!-- 产品信息 --end-->

    <!-- 付款信息 --start-->
    <div class="conter_box4">
      <p>
        <em>3</em> 付款信息
      </p>
      <ul>
        <li>
          <span>订单金额</span>
          <el-input placeholder="请输入订单金额" v-model="hemoney" style="width:70%" readonly></el-input>
        </li>
        <li>
          <span>付款方式</span>
          <el-input v-model="paystyle" style="width:70%" readonly></el-input>
        </li>
        <li v-if="yj==true">
          <span>设置天数</span>
          <el-input v-model="daycount" style="width:70%" readonly></el-input>
        </li>
        <li>
          <span>支付方式</span>
          <el-input v-model="zhifustyle" style="width:70%" readonly></el-input>
        </li>
        <li v-if="bz==true">
          <span>备注</span>
          <el-input placeholder="请输入备注" v-model="remark" style="width:70%" readonly></el-input>
        </li>
        <li v-if="fq==true">
          <p>定金</p>
          <span>付款时间</span>
          <el-input placeholder="请输入备注" v-model="djfkdate" style="width:70%" readonly></el-input>
        </li>
        <li v-if="fq==true">
          <p></p>
          <span>付款比例</span>
          <el-input placeholder="请输入付款比例" v-model="djfkratio" style="width:70%" readonly></el-input>
        </li>
        <li v-if="fq==true">
          <p></p>
          <span>付款金额</span>
          <el-input placeholder="请输入付款金额" v-model="djfkmoney" style="width:70%" readonly></el-input>
        </li>
        <li v-if="fq==true">
          <p>尾款</p>
          <span>付款时间</span>
          <el-input placeholder="请输入付款金额" v-model="wkfkdate" style="width:70%" readonly></el-input>
        </li>
        <li v-if="fq==true">
          <p></p>
          <span>付款比例</span>
          <el-input placeholder="请输入付款比例" v-model="wkfkratio" style="width:70%" readonly></el-input>
        </li>
        <li v-if="fq==true">
          <p></p>
          <span>付款金额</span>
          <el-input placeholder="请输入付款金额" v-model="wkfkmoney" style="width:70%" readonly></el-input>
        </li>
      </ul>
    </div>
    <!-- 付款信息 --end-->

    <!-- 附件上传 --start-->
    <div id="conter_box5">
      <p>
        <em>4</em> 合同上传
      </p>
      <ul>
        <li>
          <el-upload
            class="avatar-uploader"
            action="/apis/PublicAPI.asmx/UpImg"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            disabled
          >
            <img v-if="imageUrls" :src="imageUrls" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <span>订单导入</span>
        </li>
        <li>
          <el-upload
            class="avatar-uploader"
            action="/apis/PublicAPI.asmx/UpImg"
            :show-file-list="false"
            :on-success="handleAvatarSuccess1"
            :before-upload="beforeAvatarUpload"
            disabled
          >
            <img v-if="imageUrls1" :src="imageUrls1" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <span>图纸导入</span>
        </li>
        <li>
          <el-upload
            class="avatar-uploader"
            action="/apis/PublicAPI.asmx/UpImg"
            :show-file-list="false"
            :on-success="handleAvatarSuccess2"
            :before-upload="beforeAvatarUpload"
            disabled
          >
            <img v-if="imageUrls2" :src="imageUrls2" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <span>其他导入</span>
        </li>
      </ul>
    </div>
    <!-- 附件上传 --end-->

    <!-- 底部按钮 --start-->
    <div class="ryuan">
      <p>
        制表人员
        <el-input style="width:70%" v-model="zhibiaoman" readonly></el-input>
      </p>
    </div>
    <div class="bottom" v-if="e==1">
      <el-button type="primary" size="medium" @click="shenhe()">确定</el-button>
      <el-button type="info" size="medium" @click="revert()">返回</el-button>
    </div>
    <div class="bottom" v-else>
      <el-button type="info" size="medium" @click="revert()">返回</el-button>
    </div>
    <!-- 底部按钮 --end-->
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      value: [],

      dialogVisible: false,
      imageUrl: "",
      imageUrls: "",
      imageUrl1: "",
      imageUrls1: "",
      imageUrl2: "",
      imageUrls2: "",
      active: 0,
      state1: "",
      state2: "",
      dialogVisible: false,
      tableData: [{}],
      tableData1: [{}],
      tableData2: [{}],
      tableData3: [{}],
      //合同信息
      saleordno: "",
      ordertype: "",
      compony: "",
      getdate: "",
      deliverydate: "",
      writer: "",
      //客户信息

      //付款信息
      hemoney: "",
      paystyle: "",
      zhifustyle: "",
      //定金
      djfkdate: "",
      djfkratio: "",
      djfkmoney: "",
      //尾款
      wkfkdate: "",
      wkfkratio: "",
      wkfkmoney: "",
      daycount: "", //设置天数
      remark: "", //备注
      zhibiaoman: "",
      indexval: "", //零部件index
      ordtypevalue: [],
      procodevalue: [],
      fukuanstylevalue: [
        { key: 1, value: "全款" },
        { key: 2, value: "分期" },
        { key: 3, value: "特殊" },
        { key: 4, value: "月结" }
      ],
      daysvalue: [
        { key: 1, value: "30" },
        { key: 2, value: "60" },
        { key: 3, value: "90" },
        { key: 4, value: "120" }
      ],
      options: [
        {
          value: "现金",
          label: "现金"
        },
        {
          value: "承兑汇票",
          label: "承兑汇票",
          children: [
            {
              value: "电子",
              label: "电子"
            },
            {
              value: "纸质",
              label: "纸质"
            }
          ]
        }
      ],
      fq: false,
      bz: false,
      yj: false,
      e: ""
    };
  },
  created() {
    this.e = this.$route.query.e;
    this.saleordno = this.$route.query.saleordno;
    this.getxq();
  },
  methods: {
    //付款方式事件
    fkfs(e) {
      this.djfkdate = "";
      this.djfkratio = "";
      this.djfkmoney = "";
      this.wkfkdate = "";
      this.wkfkratio = "";
      this.wkfkmoney = "";
      this.daycount = "";
      this.remark = "";
      console.log(e);
      if (e == "分期") {
        this.fq = true;
        this.bz = false;
        this.yj = false;
      } else if (e == "全款") {
        this.fq = false;
        this.bz = false;
        this.yj = false;
      } else if (e == "特殊") {
        this.bz = true;
        this.fq = false;
        this.yj = false;
      } else if (e == "月结") {
        this.yj = true;
        this.bz = false;
        this.fq = false;
      }
    },
    //支付方式事件
    handleChange(value) {
      console.log(value);
    },
    //详情数据
    getxq() {
      let arr = { saleordno: this.saleordno };
      let arr1 = JSON.stringify(arr);
      axios(
        "apis/SalesManagement.asmx/OrderManagelst?index=2&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = JSON.parse(data1.string.__text);
        console.log(data3);
        this.ordertype = data3.ordertype;
        this.compony = data3.compony;
        this.zhibiaoman = data3.maker;

        for (var i = 0; i < 1; i++) {
          var dd = new Date(parseInt(data3.getdate.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          this.getdate = y + "-" + m + "-" + d + " ";
        }
        for (var i = 0; i < 1; i++) {
          var dd = new Date(parseInt(data3.deliverydate.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          this.deliverydate = y + "-" + m + "-" + d + " ";
        }
        this.writer = data3.writer;
        var val = [];
        data3.lstmon.forEach(item => {
          val.push(item);
        });
        console.log(val);
        this.hemoney = val[0].hemoney;
        this.paystyle = val[0].paystyle;
        this.fkfs(this.paystyle);
        this.zhifustyle = val[0].zhifustyle;
        if (this.paystyle == "分期") {
          for (var i = 0; i < 1; i++) {
            var dd = new Date(parseInt(val[i].djfkdate.substr(6, 13)));
            var y = dd.getFullYear();
            var m = dd.getMonth() + 1;
            m = m < 10 ? "0" + m : m;
            var d = dd.getDate();
            d = d < 10 ? "0" + d : d;
            this.djfkdate = y + "-" + m + "-" + d + " ";
          }
          this.djfkratio = val[0].djfkratio;
          this.djfkmoney = val[0].djfkmoney;
          for (var i = 0; i < 1; i++) {
            var dd = new Date(parseInt(val[i].wkfkdate.substr(6, 13)));
            var y = dd.getFullYear();
            var m = dd.getMonth() + 1;
            m = m < 10 ? "0" + m : m;
            var d = dd.getDate();
            d = d < 10 ? "0" + d : d;
            this.wkfkdate = y + "-" + m + "-" + d + " ";
          }
          this.wkfkratio = val[0].wkfkratio;
          this.wkfkmoney = val[0].wkfkmoney;
        } else if (this.paystyle == "特殊") {
          this.remark = val[0].remark;
        }
        var val1 = [];
        data3.lstcp.forEach(item => {
          val1.push(item);
        });
        this.tableData = val1;
        for (var i = 0; i < this.tableData.length; i++) {
          var dd = new Date(parseInt(this.tableData[i].delivery.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          this.tableData[i].deliverydate = y + "-" + m + "-" + d + " ";
        }
        var pic = [];
        data3.lstpic.forEach(item => {
          pic.push(item);
        });
        let picc = pic.length;
        if (picc == 3) {
          this.imageUrls = pic[0].photo2;
          this.imageUrls1 = pic[1].photo2;
          this.imageUrls2 = pic[2].photo2;
        } else if (picc == 2) {
          this.imageUrls = pic[0].photo2;
          this.imageUrls1 = pic[1].photo2;
        }
      });
    },
    //审核
    shenhe() {
      axios("apis/SalesManagement.asmx/SaleXl?index=2").then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = JSON.parse(data1.string.__text);
        console.log(data3);
        this.procodevalue = data3;
      });
    },

    pz(e) {
      let arr = { id: 1, orderno: this.saleordno, Id: e };
      let arr1 = JSON.stringify(arr);
      axios(
        "apis/SalesManagement.asmx/OrderManagelst?index=6&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = JSON.parse(data1.string.__text);
        console.log(data3);
        this.tableData1 = data3;
        this.dialogVisible = true;
      });
    },
    //零部件保存
    baocun() {
      this.dialogVisible = false;
    },
    //返回
    revert() {
      this.$router.go(-1);
    },
    //定金时间转换
    djfkdatefn() {
      this.djfkdate =
        this.djfkdate.getFullYear() +
        "-" +
        (this.djfkdate.getMonth() + 1) +
        "-" +
        this.djfkdate.getDate() +
        " ";
    },
    //尾款时间转换
    wkfkdatefn() {
      this.wkfkdate =
        this.wkfkdate.getFullYear() +
        "-" +
        (this.wkfkdate.getMonth() + 1) +
        "-" +
        this.wkfkdate.getDate() +
        " ";
    },
    //新增订单信息
    add4() {
      let arr = {};
      this.tableData.push(arr);
    },
    //新增零部件
    addlbj() {
      let arr = {};
      this.tableData1.push(arr);
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleAvatarSuccess(res, file) {
      var datas = this.$x2js.xml2js(res);
      this.imageUrl = datas.UpFileReturn.url;
      this.imageUrls = datas.UpFileReturn.fullurl;
      console.log(this.imageUrl);
    },
    handleAvatarSuccess1(res, file) {
      var datas = this.$x2js.xml2js(res);
      this.imageUrl1 = datas.UpFileReturn.url;
      this.imageUrls1 = datas.UpFileReturn.fullurl;
      console.log(this.imageUrl1);
    },
    handleAvatarSuccess2(res, file) {
      var datas = this.$x2js.xml2js(res);
      this.imageUrl2 = datas.UpFileReturn.url;
      this.imageUrls2 = datas.UpFileReturn.fullurl;
      console.log(this.imageUrl2);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.ryuan {
  width: 20%;
  margin-top: 10px;
  padding-left: 1%;
  p {
    height: 40px;
    em {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50% 50%;
      border: solid 1px #ccc;
    }
  }
}
.nav {
  height: 60px;
  padding: 0 1%;
  position: relative;
  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;
    span {
      background: $Header_color;
      color: $Header_color;
    }
  }
  #nav_go5 {
    position: absolute;
    top: 10px;
    right: 1%;
    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}

.step {
  width: 50%;
  position: absolute;
  top: 0;
  left: 25%;
}
.conter_box1 {
  background: $white;
  height: 150px;
  width: 98%;
  padding: 5px 1% 0 1%;

  p {
    height: 40px;
    em {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50% 50%;
      border: solid 1px #ccc;
    }
  }
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: #909399;
    li {
      width: 33%;
      font-size: 14px;
      margin-bottom: 10px;
      text-align: center;
    }
  }
}
.color_box {
  width: 5px;
  height: 20px;
  background-color: $blue;
  position: absolute;
  top: 22px;
  left: 10px;
}
.conter_box2 {
  background: $white;
  height: 100px;
  width: 98%;
  margin-top: 10px;
  padding: 5px 1% 0 1%;
  p {
    height: 40px;
    em {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50% 50%;
      border: solid 1px #ccc;
    }
  }
  ul {
    width: 100%;
    display: flex;
    color: #909399;
    li {
      width: 20%;
      font-size: 14px;
      margin-bottom: 10px;
    }
  }
}
.conter_box3 {
  background: $white;
  // min-height: 160px;
  //max-height: 220px;
  width: 98%;
  margin-top: 10px;
  padding: 5px 1% 0 1%;
}

.conter_box4 {
  background: $white;
  // height: 90px;
  width: 98%;
  margin-top: 10px;
  padding: 5px 1% 0 1%;
  p {
    height: 40px;

    em {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50% 50%;
      border: solid 1px #ccc;
    }
  }
  ul {
    width: 100%;
    overflow: hidden;
    color: #909399;
    // margin-right: 1%
    li {
      width: 33%;
      float: left;
      font-size: 14px;
      margin-bottom: 10px;
      text-align: right;
      p {
        text-align: left;
      }
    }
  }
}
#conter_box5 {
  background: $white;
  height: 200px;
  width: 98%;
  margin-top: 10px;
  padding: 5px 1% 0 1%;

  p {
    height: 40px;
    em {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50% 50%;
      border: solid 1px #ccc;
    }
  }
  ul {
    width: 100%;
    display: flex;
    color: #909399;
    li {
      width: 33%;
      font-size: 14px;
      margin-bottom: 10px;
      text-align: center;
      //   border: solid 1px red;
    }
  }
}
.dispose_box1 {
  border: solid 1px #ccc;
}
.dispose_box2,
.dispose_box3 {
  border: solid 1px #ccc;
  margin-top: 10px;
}
.bottom {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  // background: $white;
  position: relative;
  p {
    width: 20%;
    // height: 50px;
    line-height: 40px;
    position: absolute;
    top: 30px;
    left: 1%;
    display: flex;
    justify-content: space-between;
  }
}
</style>
<style>
.el-dialog__footer {
  text-align: center;
}

.el-input__inner {
  font-size: 12px;
  /* color: rgb(192, 196, 204); */
}
#conter_box5 .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
#conter_box5 .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
#conter_box5 .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
#conter_box5 .avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>